<template>
  <div>
    <el-main>
      <!-- 4个页面切换1.地址选择页面2.订单查看页面3.支付页面4.订单确定页面 -->
      <!-- 1.地址选择页面 -->
      <el-divider class="fen">配送地址</el-divider>
      <div class="addr-list-wrap">
        <div class="addr-list">
          <ul>
            <li v-for="(item,index) in receviers" :key="index">
              <dl>
                <dt>{{item.userName}}</dt>
                <dd>{{item.phone}}</dd>
                <dd>{{item.address}}</dd>
              </dl>
            </li>
            <li>
              <div class="addNew">
                <i class="el-icon-plus"></i>
                <el-button class="NewAddr" type="text" @click="addNewAddress">添加新地址</el-button>
                <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                  <el-form :model="formArea" :rules="rules">
                    <el-form-item label="收货人" :label-width="formLabelWidth">
                      <el-input v-model="formArea.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" :label-width="formLabelWidth" prop="tel">
                      <el-input v-model.number="formArea.tel" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="省份城市" :label-width="formLabelWidth">
                      <!-- 级联 -->
                      <el-cascader v-model="formArea.sheng" :options="options"></el-cascader>
                    </el-form-item>
                    <el-form-item label="详细地址" :label-width="formLabelWidth">
                      <el-input v-model="formArea.area" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="add()">确 定</el-button>
                  </div>
                </el-dialog>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </el-main>
    <el-footer>
      <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
    </el-footer>
  </div>
</template>
<script>
import { province } from "../assets/sheng";
export default {
  data() {
    var checkTel = (rules, value, callback) => {
      if (!value) {
        return callback(new Error("联系方式不能为空！"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的联系方式！"));
        }
      }
    };
    currentIndex: 0;
    return {
      active: 0,
      options: [],
      dialogFormVisible: false,
     
      formArea: {
        id: "",
        name: "",
        sheng: "",
        sheng1: "",
        area: "",
        tel: ""
      },
      formLabelWidth: "120px",
      rules: {
        tel: { validator: checkTel, trigger: "blur" }
      }
    };
  },
  computed:{
    receviers:{
      get(){
        return this.$store.state.user
      },
      set(v){
        this.$store.state.user=v
      }
    },
    shopId:{
        get(){
        return this.$store.state.shopIds
      },
      set(v){
        this.$store.state.shopIds=v
      }
    }
  },
  // created(){
  //   this.$axios.get('http://localhost:3000/users/'+userId)
  //   .then(res=>{
  //     console.log(res.data.data)
  //     this.receviers=res.data.data
  //   })
  //   .catch(err=>{
  //     console.log(err)
  //   })
  // },
  methods: {
    // 下一步
    next() {
    //   if (this.active++ > 2) this.active = 4;
    this.$store.state.activeNum=1
   
    this.$axios.post("http://localhost:3000/order/addOrder/"+this.receviers[0].userId,{shopIds:this.shopId})
      .then(res=>{
        console.log(res.data.data)
        if(res.data.data!=-1){
          sessionStorage.setItem('orderId',res.data.data)
           this.$router.push('/index/order/checkOrder')
        }else{
          console.log('加入失败')
        }
      
      })
      .catch(err=>{
        console.log(err)
      }) 
     
    },
    add() {
      this.dialogFormVisible = false;

      // 地址拼接
      let address1 = this.formArea.sheng;
      console.log(address1);
      this.formArea.sheng1 = address1.join("/");
      let add = {
        name: this.formArea.name,
        sheng: this.formArea.sheng1,
        tel: this.formArea.tel,
        area: this.formArea.area
      };
      this.receviers.push(add);
      this.formArea.name = "";
      this.formArea.sheng = "";
      this.formArea.area = "";
      this.formArea.tel = "";
    },
    addNewAddress() {
      this.dialogFormVisible = true;
      this.options = province;
    }
  }
};
</script>
<style scoped>
</style>
<style>
.addr-list ul li {
  margin: 10px;
  padding: 20px;
  float: left;
  width: 300px;
  height: 160px;
  color: #9e9e9e;
  border: 2px solid #9e9e9e;
  list-style: none;
  text-align: left;
  font-size: 16px;
}
.addr-list ul li:hover {
  border: 2px solid #ee7a23;
}
.addNew .el-icon-plus {
  font-size: 60px;
  width: 50px;
  height: 50px;
  color: #9e9e9e;
  margin: 20px 100px;
}
.addNew .NewAddr {
  color: #9e9e9e;
  width: 100px;
  margin: 0px 80px;
}
.el-divider__text.is-center{
    font-size: 20px;
    color: #9e9e9e;
}
</style>